﻿function CtnMonthCtrl(beginYear, endYear)
{
    this.beginYear = 1995;
    this.endYear = 2015;
    this.date = new Date();
    this.year = this.date.getFullYear();
    this.month = this.date.getMonth() + 1;
    this.form = null;
    this.dateControl = null;
    
    this.css_div = "monthctrl";
    this.css_button  = "btn";
    this.css_td_over = "td_over";
    this.css_td_out = "td_out";
    this.css_td_sel = "td_sel";
    
    this.show = CtnMonthCtrl.show;
    this.createMask = CtnMonthCtrl.createMask;
    this.createMonth = CtnMonthCtrl.createMonth;
    this.getAbsPoint = CtnMonthCtrl.getAbsPoint;
    this.bindData = CtnMonthCtrl.bindData;
    this.goPrevYear = CtnMonthCtrl.goPrevYear;
    this.goNextYear = CtnMonthCtrl.goNextYear;
    this.changeSelect = CtnMonthCtrl.changeSelect;
    this.hide = CtnMonthCtrl.hide;
    this.showMonthDiv = CtnMonthCtrl.showMonthDiv;
}

CtnMonthCtrl.show = function(el)
{
    this.dateControl = el;
    var arr = el.value.split("-");
    if (arr.length == 2)
    {
        var year = parseInt(arr[0],10);
        var month = parseInt(arr[1],10);
        if (!isNaN(year)
            && year >= this.beginYear
            && year <= this.endYear)
        {
            this.year = year;
        }
        if (!isNaN(month)
            && month >= 1
            && month <= 12)
        {
            this.month = month;
        }
    }
    this.showMonthDiv();
    this.changeSelect();
    this.bindData();
}

CtnMonthCtrl.showMonthDiv = function()
{
    el = document.getElementById("MonthCtrl");
    if (!el)
    {
        el = this.createMonth();
    }
    el.style.visibility = "visible";
    var pos = this.getAbsPoint(this.dateControl);
    if (pos.y > document.documentElement.clientHeight - this.dateControl.offsetHeight - el.offsetHeight)
    {
        el.style.top = (pos.y - el.offsetHeight) + "px";
    }
    else
    {
        el.style.top = (pos.y + this.dateControl.offsetHeight) + "px";
    }
    el.style.left = pos.x + "px";
    this.form = document.forms["monthForm"];
    
}


CtnMonthCtrl.createMask = function()
{
//    var el = document.getElementById("MonthCtrl_Mask");
//    if (el)
//    {
//        return el;
//    }
//    var el = document.createElement("div");
//    el.id = 'MonthCtrl_Mask';
//    if (MonthCtrl_Mask);
//    //创建iframe 用于遮盖select
//    if (Ctn.browser.ie('6-')){
//        $(elemMask).append('<iframe frameborder="0" marginwidth="0" style="width:100%;height:100%;filter:alpha(opacity=0);"></iframe>');
//    }
//    document.body.appendChild(elemMask);
//    return elemMask;
}

CtnMonthCtrl.createMonth = function()
{
    var el = document.createElement("div");
    el.id = 'MonthCtrl';
    el.className = this.css_div;
    var buf = [];
    buf.push('<form name="monthForm" style="margin: 0px;">');
    buf.push('<table width="100%"><tr><td>');
    buf.push('<input name="goPrevYear" type="button" value="<<"/>');
    buf.push('</td><td>');
    buf.push('<select name="selectYear">');
    for (var i = this.beginYear; i <= this.endYear; i++)
    {
        buf.push('<option value="' + i + '">' + i + '</option>');
    }
    buf.push('</select">');
    buf.push('</td><td>');
    buf.push('<input name="goNextYear" type="button" value=">>"/>');
    buf.push('</td></tr></table>');
    buf.push('<table id="monthTable" width="100%"><tr>');
    for (var i = 0; i < 12; i++)
    {
        if (i > 0 && i % 3 == 0)
        {
            buf.push("</tr><tr>");
        }
        buf.push('<td class="' + this.css_td_out + '">');
        buf.push(i + 1);
        buf.push("</td>");
    }
    buf.push("</tr></table>");
    buf.push('<table width="100%"><tr><td>');
    buf.push('<input name="clearMonth" type="button" value="清空"/>');
    buf.push('</td><td>');
    buf.push('<input name="thisMonth" type="button" value="这月"/>');
    buf.push('</td><td>');
    buf.push('<input name="closeDlg" type="button" value="关闭"/>');
    buf.push('</td></tr></table>');
    buf.push("</form>");
    el.innerHTML = buf.join("");
    document.body.appendChild(el);
    var mt = this;
    this.form = document.forms["monthForm"];
    this.form.goPrevYear.onclick = function ()
    {
        mt.goPrevYear();
    }
    this.form.goNextYear.onclick = function ()
    {
        mt.goNextYear();
    }
    this.form.clearMonth.onclick = function ()
    {
        mt.dateControl.value = "";
    }
    this.form.thisMonth.onclick = function ()
    {
        mt.year = new Date().getFullYear();
        mt.month = new Date().getMonth() + 1;
        mt.changeSelect();
        mt.bindData();
    }
    this.form.closeDlg.onclick = function ()
    {
        mt.hide();
    }
    var tds = document.getElementById("monthTable").getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++)
    {
        tds[i].onmouseover = function () {
            this.className = this.className.replace(mt.css_td_out, mt.css_td_over);
        }
        tds[i].onmouseout = function () {
            this.className = this.className.replace(mt.css_td_over,mt.css_td_out);
        }
        tds[i].onclick = function()
        {
            mt.month = parseInt(this.innerHTML,10);
            mt.bindData();
            mt.hide();
        }
    }

    return el;
}

CtnMonthCtrl.getAbsPoint = function (e){
  var x = e.offsetLeft;
  var y = e.offsetTop;
  while(e = e.offsetParent){
    x += e.offsetLeft;
    y += e.offsetTop;
  }
  return {"x": x, "y": y};
}

CtnMonthCtrl.goPrevYear = function()
{
  if (this.year <= this.beginYear){return;}
  this.year--;
  this.changeSelect();
}

CtnMonthCtrl.goNextYear = function()
{
  if (this.year >= this.endYear){return;}
  this.year++;
  this.changeSelect();
}

CtnMonthCtrl.changeSelect = function() {
  this.date = new Date(this.year, this.month, 1);
  var sy = this.form.selectYear;
  for (var i= 0; i < sy.length; i++){
    if (sy.options[i].value == this.year){
      sy[i].selected = true;
      break;
    }
  }
}
CtnMonthCtrl.bindData = function()
{
    var tds = document.getElementById("monthTable").getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++)
    {
        if (i == this.month-1)
        {
            tds[this.month-1].className = this.css_td_sel;
            this.dateControl.value = this.year + "-" + this.month;
        }
        else
        {
            tds[i].className = this.css_td_out;
        }
    }
}
CtnMonthCtrl.hide = function()
{
  var el = document.getElementById("MonthCtrl");
  el.style.visibility = "hidden";
}
